<template>
	<view>
		<ul>
			<li v-for="(item,index) in this.data" class="list">
				<div class="pop">
					<div class="img">
						<image :src="item.hpImg" mode="widthFix"></image>
					</div>
					<p>{{ item.content }}</p>
				</div>
				<image class="image" :src="item.url" mode="aspectFill" />
			</li>
		</ul>
	</view>
</template>

<script>
	export default {
		name:"gather",
		data() {
			return {
			};
		},
		props:["data"], //接收父组件传过来的值
	}
</script>

<style lang="scss" scoped>
	::-webkit-scrollbar{
		display: none;
	}
	
	ul{
		display: flex;
		height: 350rpx;
		overflow-y: hidden;
		overflow-x: scroll;
		padding: 0;
		.list{
			position: relative;
			list-style-type: none;
			width: 230rpx;
			height: 100%;
			margin-left: 20rpx;
			.pop{
				display: flex;
				position: absolute;
				// position: fixed;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				bottom: 0;
				z-index: 1;
				color: #FFFFFF;
				padding: 30rpx 0;
				font-size: 28rpx;
				width: 100%;
				// background-image: linear-gradient( rgba(1,1,1,0) , rgba(1,1,1,.5));
				.img{
					overflow: hidden;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					image{
						width: 100%;
					}
				}
			}
			image{
				width: 230rpx;
				height: 350rpx;
				border-radius: 10%;
			}
		}
	}
	
</style>
